<template>
  <div>
    <ElForm inline>
      <ElFormItem label="TITLE">
        <ElInput v-model="queryCondition.titleLike"></ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton type="primary" icon="Search" @click="queryByCondition(1)"></ElButton>
      </ElFormItem>
      <ElFormItem>
        <ElButton type="info" icon="ZoomOut" @click="reset()"></ElButton>
        <ElButton type="success" icon="Plus" @click="open4Insert()"></ElButton>
      </ElFormItem>
    </ElForm>

    <ElTable :data="pageInfo.results" :border="true" stripe max-height="600px" height="400px">
      <ElTableColumn type="selection"></ElTableColumn>
      <ElTableColumn label="CODE" prop="materialCode"></ElTableColumn>
      <ElTableColumn label="TOPIC" prop="title"></ElTableColumn>
      <!-- <ElTableColumn label="Bank" prop="bankCode"></ElTableColumn> -->
      <!-- <ElTableColumn label="RATE" prop="rate"></ElTableColumn> -->
      <ElTableColumn label="RATE">
        <template #default="{ row }">
          <ElTag>{{ row.rate.toFixed(2) }}%</ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn label="PERIOD" prop="period" width="82"></ElTableColumn>
      <ElTableColumn label="UNIT" prop="unit" width="84"></ElTableColumn>
      <ElTableColumn label="fundTimes" prop="fundTimes" width="100"></ElTableColumn>
      <ElTableColumn label="operation">
        <template #default="{ row }">
          <ElButton @click="open4modify(row)" type="warning" size="small" icon="Edit"></ElButton>
          <ElButton @click="remove(row)" type="info" size="small" icon="Remove"></ElButton>
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      background
      :total="pageInfo.total"
      :page-size="queryCondition.pageSize"
      @current-change="queryByCondition"
    ></ElPagination>
    <MaterialInsert ref="insertDrawer" @post-insert="queryByCondition"></MaterialInsert>
    <MaterialModify ref="modifyDrawer" @post-modify="queryByCondition"></MaterialModify>
  </div>
</template>
<script lang="ts" setup>
import * as fund from '@/apis/fund'
const insertDrawer: any = ref(null)
const modifyDrawer: any = ref(null)
const queryCondition = reactive({
  pageNum: 1,
  pageSize: 8,
  titleLike: '',
  bankName: ''
})
const pageInfo = reactive({
  results: [],
  total: 0
})
const queryByCondition = async (pageNum?: number) => {
  if (pageNum) {
    queryCondition.pageNum = pageNum
  }
  // const res = await axios({
  //   method: 'post',
  //   url: 'http://localhost:9091/bankMaterial/queryForBank',
  //   data: queryCondition
  // })
  const res = await fund.bankMaterialQueryForBank(queryCondition)
  pageInfo.results = res.data.records
  pageInfo.total = res.data.total
}
onMounted(() => {
  queryByCondition(1)
})

const remove = async (row: any) => {
  // const res = await axios({
  //   method: 'delete',
  //   url: 'http://localhost:9091/bankMaterial/remove/' + row.materialCode
  // })
  const res = await fund.bankMaterialDelete(row.materialCode)
  ElMessage.success(' deleted ' + row.materialCode)
  queryByCondition()
}
const open4modify = async (row: any) => {
  // const res = await axios({
  //   method: 'get',
  //   url: 'http://localhost:9091/bankMaterial/find/' + row.materialCode
  // })

  const res = await fund.bankMaterialFind(row.materialCode)
  modifyDrawer.value.show(res.data)
}

const reset = () => {
  queryCondition.titleLike = ''
  queryByCondition(1)
}
const open4Insert = () => {
  insertDrawer.value.show()
}
</script>
<style lang="scss" scoped></style>
